<template>
  <span>
    <el-tooltip
      :disabled="!isShowTooltip"
      effect="dark"
      :content="content"
      placement="bottom">
      <el-button
        v-if="!isOnlyRegisNo"
        v-html="regisNoButton()"
        :disabled="isDisabled"
        @click="showRegistion()"
        :type="type"
      />
      <span v-else>{{ regisNo }}</span>
    </el-tooltip>
    <new-registration-detail
      v-if="!!regisData"
      :visible="visible"
      @dialogClose="dialogClose"
      :card-data="regisData" />
  </span>
</template>

<script>
import newRegistrationDetail from './newRegistrationDetail'
/**
 * table表格注册证信息展示
 *  1.产品中心返回 0 1 null
 *  2.订单中心返回 "Y" "N" null
 */
const typeData = {
  0: 'text',
  1: 'text text-danger',
  N: 'text',
  Y: 'text text-danger'
}
export default {
  name: 'CellRegistration',
  components: { newRegistrationDetail },
  props: {
    regisNo: {
      type: String,
      default: ''
    },
    status: {
      type: [String, Number],
      default: 0
    },
    content: {
      type: String,
      default: ''
    },
    regisData: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    isShowTooltip () {
      return ['Y', 1].includes(this.status)
    },
    isOnlyRegisNo () {
      return !!this.regisNo && !this.regisData
    },
    isDisabled () {
      return !this.regisNo
    },
    type () {
      if (this.status === null || this.status === void 0) {
        return 'text'
      }
      return typeData[this.status]
    }
  },
  data () {
    return {
      visible: false
    }
  },
  methods: {
    // 注册证号展示
    regisNoButton () {
      return this.regisNo ? this.regisNo : '暂无数据'
    },

    // 查看注册证
    showRegistion () {
      this.visible = true
    },

    // 关闭dialog
    dialogClose (flag) {
      this.visible = flag
    }
  }

}
</script>

<style>

</style>
